<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 酒店系统</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f7f9fc;
        }
        .header {
            text-align: center;
            padding: 50px 0;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            font-size: 2.5rem;
        }
        .header p {
            font-size: 1.2rem;
            color: #666;
        }
        .card {
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            padding: 20px;
            background-color: white;
            margin: 20px 0;
        }
        footer {
            text-align: center;
            padding: 20px 0;
            background-color: #fff;
            box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        }

        /* 滚动公告style START */
        .announcement-bar {
            overflow: hidden;
            background: #009688;
            color: white;
            padding: 21px 0;
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
        }

        .announcement-content {
            white-space: nowrap;
            animation: scroll 10s linear infinite;
            position: absolute;
            right: 0;
        }

        @keyframes scroll {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        /* 滚动公告style END */
    </style>
</head>
<body>

<div class="announcement-bar">
    <div class="announcement-content">
        <h4 style="font-size: 16px;">欢迎访问我们的酒店展示网站！所有酒店均可在线预约。</h4>
    </div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">酒店展示</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="favorites.html">酒店收藏</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">我的订单 <span class="sr-only">(当前页)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="profile.html">个人中心</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="card">
        <h3>订单详情</h3>
        <h4>酒店名称: 酒店A</h4>
        <p><i class="bi bi-geo-alt-fill"></i> 地址: 市中心，XX路123号</p>
        <p>入住日期: 2023-10-01</p>
        <p>离店日期: 2023-10-05</p>
        <p>房间类型: 豪华单人房</p>
        <p>订单号: 123456789</p>
        <p>付款状态: 已支付</p>
        <button class="btn btn-danger" onclick="cancelBooking('酒店A')">取消预订</button>
    </div>

    <div class="card">
        <h3>其他信息</h3>
        <p>特殊要求: 需要无烟房间</p>
        <p>客服联系方式: 400-123-4567</p>
    </div>

    <div class="card">
        <h3>管理操作</h3>
        <button class="btn btn-primary" onclick="window.location.href='index.html'">查找更多酒店</button>
        <button class="btn btn-secondary" onclick="window.location.href='update_info.html'">修改个人信息</button>
    </div>
</div>

<footer>
    <p>&copy; 2023 酒店系统. 版权所有.</p>
</footer>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    function cancelBooking(hotelName) {
        alert(`您已取消对${hotelName}的预订！`);
    }
</script>

</body>
</html>
